<script setup>
import { ref, watch, computed } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getQuestionByQuestionId, deleteQuestion, editQuestion } from '@/api/question'
import { deleteResult, getResultsByQuestionId, reply, editResult } from '@/api/result'
import { getUserinfoById } from '@/api/auth';
import useQuestionStore from '@/store/question';
import router from '@/router';
import { HOME } from '@/router/routeMap';
import useApiCallback from '@/hooks/useApiCallback';
import Question from '@/views/question/index.vue'

const route = useRoute()
const question = ref(null)
const results = ref([])
const questionUserinfo = ref()

const questionId = computed(() => route.params.questionId)
const questioner = computed(() => question.value.questioner)

const [handleGetQuestion] = useApiCallback(async () => {
  const result = await getQuestionByQuestionId(questionId.value)
  if (result.code === 0) {
    question.value = result.data
  }
})

const [handleGetQuestionResults] = useApiCallback(async () => {
  const result = await getResultsByQuestionId(questionId.value)
  if (result.code === 0) {
    results.value = result.data
  }
})

const [getQuestionUserinfo] = useApiCallback(async () => {
  const result = await getUserinfoById(questioner.value)
  if (result.code === 0) {
    questionUserinfo.value = result.data
  }
})

const [onClickReply] = useApiCallback(async (content) => {
  const result = await reply({ questionId: questionId.value, content })
  if (result.code === 0) {
    ElMessage.success(result.message)
    handleGetQuestionResults()
  }
})

const { updateQuestionList } = useQuestionStore()
const [onClickDeleteQuestion] = useApiCallback(async () => {
  const result = await deleteQuestion(questionId.value)
  if (result.code === 0) {
    ElMessage.success(result.message)
    updateQuestionList()
    router.push(HOME)
  }
})

const [onClickDeleteResult] = useApiCallback(async (resultId) => {
  const result = await deleteResult(resultId)
  if (result.code === 0) {
    ElMessage.success(result.message)
    handleGetQuestionResults()
  }
})

const [onClickEditQuestion] = useApiCallback(async (content) => {
  const result = await editQuestion({ questionId: questionId.value, content })
  if (result.code === 0) {
    ElMessage.success(result.message)
    handleGetQuestion()
  }
})

const [onClickEditResult] = useApiCallback(async ({ resultId, content }) => {
  const result = await editResult({ resultId, content })
  if (result.code === 0) {
    ElMessage.success(result.message)
    handleGetQuestionResults()
  }
})

handleGetQuestion()
handleGetQuestionResults()
watch(question, (newVal) => {
  if (!newVal) return
  getQuestionUserinfo(newVal)
})
</script>

<template>
  <Question
    :question="question"
    :questionUserinfo="questionUserinfo"
    :results="results"
    @clickReply="onClickReply"
    @clickDeleteQuestion="onClickDeleteQuestion"
    @clickDeleteResult="onClickDeleteResult"
    @clickEditQuestion="onClickEditQuestion"
    @clickEditResult="onClickEditResult"
  />
</template>
